<style lang="less">
    .Album{
        .imgdata{
            position:relative;
            width: 30vw;
            background: brown;
            .dataimg{
                position: absolute;
                width:7vw;
                height:4vw;
            }
            .qingchuimg{
                position: absolute;
                left:8.5vw;
                color: blue;
                cursor:pointer;
            }
        }
        .radiodata{
            margin-top: 4.5vw;
        }
        .title{
            font-size: 16px;
            color: black;
        }
        .miaoshudata{
            font-size: 12px;
        }
        .dataimg{
            width:8vw;
            height: 8vw;
            margin-left: 1vw;
        }
        .jiahao{
            width: 8vw;
            height: 6vw;
            text-align: center;
            line-height: 6vw;
            border: 1px dashed #d9d9d9;
        }
        .el-upload-dragger{
            width:8vw;
            height: 6vw;
        }
    }
</style>
<template>
    <div class="Album">
        <div v-for="(item,key) in editAlbumdata">
            <div class="title">{{item.title}}</div>
            <div v-if="key == 'panorama'">
                <el-input type="textarea"  v-model="item.value" placeholder="请输入全景图链接"></el-input>
            </div>
            <div v-else-if="key == 'aerial_view_list'">
                <el-row :gutter="30">
                    <el-col v-for="(value,i) in item.value" :span="6">
                        <div class="imgdata">
                            <el-image
                                class="dataimg"
                                :src="getthumb(value.thumb)"
                                :fit="'cover'">
                            </el-image>
                            <div class="qingchuimg"  @click="yichu(key,i)">X</div>
                        </div>
                        <!-- <el-button type="primary" size="mini" @click="yichu(key,i)">移除</el-button> -->
                        <div class="radiodata">
                            <el-input v-model="value.remark" placeholder="鸟瞰图备注"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-upload
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_aerial">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                    </el-col>
                </el-row>
            </div>
            <div v-else-if="key != 'panorama' && key != 'aerial_view_list'">
                <el-row :gutter="10">
                    <el-col v-for="(value,i) in item.value" :span="6">
                        <div class="imgdata">
                            <el-image
                                v-if="value.thumb"
                                class="dataimg"
                                :src="getthumb(value.thumb)"
                                :fit="'cover'">
                            </el-image>
                            <el-image
                                v-if="!value.thumb"
                                class="dataimg"
                                :src="value.thumb"
                                :fit="'cover'">
                            </el-image>
                            <div class="qingchuimg"  @click="yichu(key,i)">X</div>
                        </div>
                        <div class="radiodata">
                            <el-radio v-model="value.desc" :label="d" v-for="(desc,d) in item.desc_template">{{mioashutitle[d]}}</el-radio>
                        </div>
                    </el-col>
                    <el-col :span="6" >
                        <el-upload
                            v-if="key == 'lobby_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_lobby">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'restaurant_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_restaurant">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'living_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_living">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'kitchen_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_kitchen">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'bedroom_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_bedroom">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'Study_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_Study">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'balcony_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_balcony">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'aisle_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_aisle">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                        <el-upload
                            v-if="key == 'toilet_view_list'"
                            class="upload-demo"
                            drag
                            multiple
                            action="http://designer.test/api/"
                            :show-file-list="false"
                            :http-request="uploadSectionFile_toilet">
                            <i class="el-icon-plus jiahao"></i>
                        </el-upload>
                    </el-col>
                </el-row>
                <div v-for="(desc,d) in item.desc_template">
                    <div >{{mioashutitle[d]}}</div>
                    <el-input class="miaoshudata" v-model="item.desc_template[d]" type="textarea"  :autosize="{ minRows: 2, maxRows: 6}"></el-input>
                </div>
                
            </div>
            <div style="height:20px"></div>
        </div>
        <el-button slot="trigger" type="primary" @click="storeAlbumdata">提交电子相册</el-button>
        <el-button slot="trigger" type="primary" @click="yulanAlbumdata">预览电子相册</el-button>
    </div>
</template>
<script>
import { editAlbum,storeAlbum,assumeRole,uploadimage} from '@/request/api';
export default {
    data() {
        return {
            mioashutitle:['描述A','描述B','描述C','描述D','描述E','描述F'],
            imghttp:'https://kny-sxy.oss-accelerate.aliyuncs.com',
            fileList:[],
            id:'3',
            editAlbumdata:{},
            extentions:"png,jpg",
            crm_oid:''
        }
    },
    mounted() {
        this.getAssumeRole();
    },
    methods: {
        setid(id,crm_oid){
            this.id = id;
            this.crm_oid = crm_oid;
            this.geteditAlbum();
        },
        geteditAlbum(){
            editAlbum({id:this.id}).then(res => {
                if(res.ok){
                    this.editAlbumdata = res.data;
                }
            })
        },
        getthumb(thumb){
            if(thumb.indexOf('http') === -1){
                return this.imghttp+thumb;
            }else{
                return thumb;
            }
        },
        //移除图片
        yichu(key,i){
            this.editAlbumdata[key].value.splice(i,1);
            console.log(this.editAlbumdata);
        },
        //提交数据
        storeAlbumdata(){
            let param = {};
            param.designer_demand_id = this.id;
            param.detailed_desc = this.editAlbumdata;
            storeAlbum(param).then(res => {
                if(res.ok){
                    this.$message({
                        message: '上传数据成功',
                        type: 'success'
                    });
                    this.$emit('close');
                }
            })
        },
        //鸟瞰图
        uploadSectionFile_aerial(param){
            this.multipartUpload(param,'aerial_view_list');
        },
        //门厅效果图
        uploadSectionFile_lobby(param){
            this.multipartUpload(param,'lobby_view_list');
        },
        //餐厅效果图
        uploadSectionFile_restaurant(param){
            this.multipartUpload(param,'restaurant_view_list');
        },
        //客厅效果图
        uploadSectionFile_living(param){
            this.multipartUpload(param,'living_view_list');
        },
        //厨房效果图
        uploadSectionFile_kitchen(param){
            this.multipartUpload(param,'kitchen_view_list');
        },
        //卧房效果图
        uploadSectionFile_bedroom(param){
            this.multipartUpload(param,'bedroom_view_list');
        },
        //书房效果图
        uploadSectionFile_Study(param){
            this.multipartUpload(param,'Study_view_list');
        },
        //阳台效果图
        uploadSectionFile_balcony(param){
            this.multipartUpload(param,'balcony_view_list');
        },
        //过道效果图
        uploadSectionFile_aisle(param){
            this.multipartUpload(param,'aisle_view_list');
        },
        //卫生间效果图
        uploadSectionFile_toilet(param){
            this.multipartUpload(param,'toilet_view_list');
        },
        addphoto(name,key){
            if(key == 'aerial_view_list'){
                this.editAlbumdata[key].value.push({thumb:name,remark:''});
            }else{
                this.editAlbumdata[key].value.push({thumb:name,desc:0});
            }
            console.log(this.editAlbumdata[key]);
        },
        async multipartUpload (param,key) {
            this.extention = param.file.name.split('.').pop();
            if (this.extentions.indexOf(this.extention) === -1) {
                this.$message.error('文件格式不支持!');
                this.fileList = [];
                return;
            }
            // let name =  '/designer/' + this.randomString(8) + '_' + param.file.name;
            let file = param.file;
            let formData = new FormData();
            formData.set('file', file);
            uploadimage(formData).then(res => {
                console.log(res.location);
                this.addphoto(res.location,key);
            })
            // let that = this;
            // try {
            //     // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
            //     // 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如mytestdoc/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
            //     // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
            //     let result = await that.client.multipartUpload(name, file, {
            //     progress: function (p, checkpoint) {
            //         that.process = parseInt(p*100);
            //     },
            //     })
            //     this.addphoto(name,key);
            //     // that.shangchuanFrom.attachment = name;
            //     // this.fileList = [];
            // } catch(e){
            //     // this.fileList = [];
            //     console.log('上传失败'+e);
            //     // HeyUI.$Message.error("上传失败，请重试");
            // }
        },
        getAssumeRole(){
            assumeRole({}).then(res => {
                if(res.ok){
                    var assumedata = res.data.res;
                    let OSS = require('ali-oss');
                    this.client = new OSS({
                        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                        region: 'oss-cn-qingdao',
                        // 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
                        accessKeyId: assumedata.Credentials.AccessKeyId,
                        accessKeySecret: assumedata.Credentials.AccessKeySecret,
                        stsToken: assumedata.Credentials.SecurityToken	,
                        // 填写Bucket名称。
                        bucket: 'kny-sxy'
                    });
                }
            })
        },
        randomString(length) {
            var result = '';
            var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
                return result;
        },
        yulanAlbumdata(){
            window.open("https://erp.knoya.com/designer_club/"+this.id+"/photo_albumt");
        }
    },
    components: {
        
            
    },

}
</script>
